<template>
	<view>
		<view class="strickyBlock" >
			<view class="orderStatus">
				<!-- <text>所有订单</text>
				<view class="statusChange">
					<uniIcons type="more-filled" @click="changeStatus" color="#fff" size="26"></uniIcons>
					<view class="statusCheck" v-if="beginCheck">
						<view :class="['statusItem',index==status.length-1?'':'borderBo']" v-for="(item , index) in status" :key="index" @click="checkStatus(item)">
							{{item.text}}
						</view>
					</view>
				</view> -->
				<view :class="ordertabIndex == index ?'order-active order-default':'order-default'" v-for="(item,index) in ordertablist"
				 :key="index" @click="changeorderTab(index,item.name)">{{item.name}}</view>
			</view>
			<view class="orderStatus">
				<text>{{currStatus}}</text>
				<text>{{totalnumlength}}</text>
			</view>
		</view>
		<view class="orderContain">
			<uniCollapse accordion="true">
				<block v-for="(item ,index) in list" :key="index">
					<uniCollapseItem :title="'订单编号'+item.orderNo">
						<view class="orderDetail">
							<view class="detileTitle detailRow">
								<image src="../static/orderIcon.png" class="titleImg" mode=""></image>
								<text>订单详情</text>
							</view>
							<!-- 	<view class="detailRow">
								<text class="reservation">预约号A0059</text>
								<text class="preInfo">前面还有10桌，预计还需要30分钟</text>
							</view> -->
							<view class="detailRow">
								<view class="desc">
									联系人
								</view>
								<text class="infoweight">{{item.userName}}</text>
							</view>
							<view class="detailRow" @click="phonecall(item.userPhone)">
								<view class="desc">
									联系电话
								</view>
								<text class="infoweight">{{item.userPhone}}</text>
							</view>
							<view class="goodsRow" v-for="(list,goodsindex) in item.orderGoodsList" :key="goodsindex">
								<view class="picAndName">
									<image :src="list.goodsImg" class="goodImg" mode=""></image>
									<text class="preInfo">{{list.goodsName}}</text>
								</view>
								<view class="goodsPrice">
									￥{{list.goodsPrice}}
								</view>
							</view>
							<view class="betwenRow">
								<text>支付金额</text>
								<text class="payPrice">￥{{item.realTotalMoney}}</text>
							</view>
							<view class="betwenRow">
								<text>让利值</text>
								<text class="payPrice">{{item.rebatePv}}</text>
							</view>
							<view class="betwenRow">
								<text>支付状态</text>
								<text>已支付</text>
							</view>
							<view class="betwenRow" v-if="item.appointmentType == 1">
								<text>预约详情</text>
								<view class="reserver">
									<text>{{item.appointmentTime}}</text>
									<text>{{item.appointmentSelected}}</text>
								</view>
							</view>
							<view class="detileTitle detailRow">
								<image src="../static/orderIcon.png" class="titleImg" mode=""></image>
								<text>订单信息</text>
							</view>
							<view class="betwenRow">
								<text>订单号</text>
								<text>{{item.orderNo}}</text>
							</view>
							<view class="betwenRow">
								<text>订单交易编号</text>
								<text>{{item.tradeNo}}</text>
							</view>

							<view class="betwenRow">
								<text>订单创建时间</text>
								<text>{{item.createTime}}</text>
							</view>
							<view class="betwenRow">
								<text>订单支付时间</text>
								<text>{{item.payTime}}</text>
							</view>
							<view class="betwenRow" v-if="item.appointmentType == 1">
								<text>订单预约时间</text>
								<text>{{item.appointmentTime}}</text>
							</view>
							<view class="oprateRow">
								<view class="optareItem" @click="informcustomer(item.orderId)" v-show="item.isAppointmentNotified == 0">
									通知顾客  
								</view>
								<view class="optareItem" v-show="item.isAppointmentNotified == 1">
									已通知顾客  
								</view>
								<view class="optareItem" v-show="item.orderStatus != 2" @click="confirm(item.orderId)">
									完成订单
								</view> 
								<view class="optareItem" v-show="item.orderStatus == 2">
									已完成
								</view> 
							</view>
						</view>
					</uniCollapseItem>
				</block>

			</uniCollapse>
		</view>
		<backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
	import backTop from '@/components/back-top/back-top.vue';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			backTop,
			uniIcons,
			uniCollapse,
			uniCollapseItem
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		data() {
			return {
				totalnumlength:0,
				waitlod: false,
				ordertabIndex: 0,
				ordertablist: [{
						name: '预约订单'
					},
					{
						name: '线下订单'
					},
					{
						name: '未通知'
					},
					{
						name: '已通知'
					},
				],
				defaultlist: [],
				list: [],
				list_:[],
				backTop: {
					src: '../../static/back-top/top.png',
					scrollTop: 0
				},
				scrollTop: 0,
				currStatus: '预约订单',
				beginCheck: false,
				page: 1,
				isAppointmentlist:[],
				isAppointmentNotifiedlist:[]
			};
		},
		onLoad() {
			this.getorderdetails()
		},
		methods: {
			checkStatus(item) {
				this.currStatus = item.text
				this.changeStatus()
			},
			changeStatus() {
				this.beginCheck = !this.beginCheck
			},
			confirm(id){
				let that = this;
				let data = {
					orderId:id,
					orderFrom:2,
				}
				that.$Request.request('/api/shop_order/appointmentFinish', 'POST', data).then(res => {
					if (res.status == 1) {
						that.$api.msg('订单已完成')
						// that.list = [];
						that.getorderdetails()
					}
				})
			},
			changeorderTab(index, name) {
				let that = this;
				that.ordertabIndex = index;
				that.currStatus = name;
				let list = that.list;
				that.list = [];
				if(index == 0){
					that.list = that.defaultlist
				}
				if (index == 1) {
					that.list = that.list_;
				}
				if(index == 2){
					that.list =that.isAppointmentNotifiedlist 
				}
				if(index == 3){
					that.list = that.isAppointmentlist
				}
				that.totalnumlength = that.list.length;
			},
			informcustomer(id) {
				let that = this;
				let data = {
					orderId:id
				}
				that.$Request.request('/api/shop_order/appointmentNotify', 'POST', data).then(res => {
					if (res.status == 1) {
						that.$api.msg('通知成功')
						// that.list = [];//
						that.getorderdetails()
					}
				})
				.catch(eror=>{
					
				})
			},
			phonecall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (result) => {},
					fail: (result) => {}
				})
			},
			getorderdetails() {
				let that = this;
				let data = {
					p: that.page
				}
				that.$Request.request('/api/shop_order/traderOrderList', 'GET', data).then(res => {
					if (res.status == 1) {
						let index = 0, index_ = 0, isAppointmentNotifiedIndex = 0, isAppointmentIndex = 0
						res.data.list.forEach(item => {
							if (item.appointmentType == 1) {
								if(that.list[index] == null){
									that.list.push(item)
								}else{
									Object.assign(that.list[index],item)
								}
								index++
							}else{
								if(that.list_[index_] == null){
									that.list_.push(item)
								}else{
									Object.assign(that.list_[index_],item)
								}
								index_++
								// Object.assign(that.list_[index],item)
								// that.list_.push(item)
							}
							if(item.isAppointmentNotified == 0){
								if(that.isAppointmentNotifiedlist[isAppointmentNotifiedIndex] == null){
									that.isAppointmentNotifiedlist.push(item)
								}else{
									Object.assign(that.isAppointmentNotifiedlist[isAppointmentNotifiedIndex],item)
								}
								isAppointmentNotifiedIndex++
								// Object.assign(that.isAppointmentNotifiedlist[index],item)
								// that.isAppointmentNotifiedlist.push(item)
							}else{
								if(that.isAppointmentlist[isAppointmentIndex] == null){
									that.isAppointmentlist.push(item)
								}else{
									Object.assign(that.isAppointmentlist[isAppointmentIndex],item)
								}
								isAppointmentIndex++
								// Object.assign(that.isAppointmentlist[index],item)
								// that.isAppointmentlist.push(item)
							}
						})
						that.defaultlist = res.data.list
						that.totalnumlength = res.data.list.length
					}else{
						
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './storeOrder.scss';

	.order-active {
		background-color: #fff;
		color: #333;
	}

	.order-default {
		height: 70upx;
		line-height: 70upx;
		width: 120upx;
		text-align: center;
	}
</style>
